<template>
  <view class="class-record-container">
    <!-- 页面头部 -->
    <view class="header" :style="currentGradient">
      <text class="title">上课记录</text>
    </view>

    <!-- 记录列表 -->
    <scroll-view
      class="record-list"
      scroll-y
      @scrolltolower="loadMore"
      :style="{ height: scrollHeight + 'px' }"
    >
      <view class="record-card card" v-for="item in records" :key="item.id">
        <view class="card-header">
          <view class="header-content">
            <text class="course-type">{{ item.courseName }}</text>
            <text class="record-date">{{ formatDate(item.startTime) }}</text>
          </view>
          <view class="class-info">
            <uni-icons type="person" size="14" color="#999"></uni-icons>
            <text class="class-name">{{ item.className }}</text>
          </view>
        </view>

        <view class="card-content">
          <view class="info-row">
            <uni-icons type="calendar" size="16" color="#666"></uni-icons>
            <text class="time-text">
              时间: {{ formatDisplayTime(item.startTime) }} -
              {{ formatDisplayTime(item.endTime) }}
            </text>
          </view>

          <view class="info-row">
            <uni-icons type="person" size="16" color="#666"></uni-icons>
            <text class="teacher-text">教师: {{ item.teacherName }}</text>
          </view>

          <view class="info-row">
            <uni-icons type="location" size="16" color="#666"></uni-icons>
            <text class="duration-text"
              >打卡时长: {{ item.consumeTime }} 分钟</text
            >
          </view>

          <view class="info-row">
            <uni-icons type="location" size="16" color="#666"></uni-icons>
            <text class="duration-text"
              >计费时长: {{ item.chargeableTime }} 分钟</text
            >
          </view>
        </view>

        <view class="card-footer">
          <view class="duration-badge" :style="currentGradient">
            <text>{{ item.consumeTime }} 分钟</text>
          </view>
        </view>
      </view>

      <!-- 加载状态 -->
      <view class="loading-status">
        <text v-if="isLoading">加载中...</text>
        <text v-else-if="noMoreData">没有更多数据了</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { getClassList } from "@/api/attendanceApi";
import { getCurrentTheme } from "@/utils/theme";

// 课程记录数据
const records = ref([]);
const currentPage = ref(1);
const pageSize = 10;
const isLoading = ref(false);
const noMoreData = ref(false);
const scrollHeight = ref(0);
const total = ref(0);

// 获取当前主题
const currentTheme = computed(() => getCurrentTheme());

// 计算当前主题的渐变样式
const currentGradient = computed(() => {
  return `background: linear-gradient(135deg, ${currentTheme.value.start} 0%, ${currentTheme.value.end} 100%);`;
});

// 获取课程记录数据
const fetchClassRecords = async () => {
  if (isLoading.value || noMoreData.value) return;

  isLoading.value = true;

  try {
    const params = {
      pageNum: currentPage.value,
      pageSize: pageSize,
    };

    const res = await getClassList(params);
    console.log("获取课程记录成功:", res);

    if (res.code === 0) {
      if (currentPage.value === 1) {
        records.value = res.data.list || []; // 修改为 res.data.list
      } else {
        records.value = [...records.value, ...(res.data.list || [])]; // 修改为 res.data.list
      }

      total.value = res.data.total; // 修改为 res.data.total

      // 检查是否已加载全部数据
      noMoreData.value = records.value.length >= total.value;
      currentPage.value++;
    }
  } catch (error) {
    console.error("获取上课记录失败:", error);
    uni.showToast({
      title: "获取数据失败",
      icon: "none",
    });
  } finally {
    isLoading.value = false;
  }
};

// 加载更多数据
const loadMore = () => {
  fetchClassRecords();
};

// 计算滚动区域高度
onMounted(() => {
  uni.getSystemInfo({
    success: (res) => {
      scrollHeight.value = res.windowHeight - 100;
    },
  });

  // 初始化数据
  fetchClassRecords();
});

// 辅助方法
const formatDisplayTime = (time) => {
  if (!time) return "";

  // 格式化时间为 HH:mm
  const date = new Date(time);
  const hours = date.getHours().toString().padStart(2, "0");
  const minutes = date.getMinutes().toString().padStart(2, "0");

  return `${hours}:${minutes}`;
};

const formatDate = (time) => {
  if (!time) return "";

  // 格式化日期为 YYYY-MM-DD
  const date = new Date(time);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");

  return `${year}-${month}-${day}`;
};
</script>

<style scoped lang="scss">
.class-record-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30rpx 0;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: white;
  }
}

.record-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.record-card {
  padding: 0;
  background: $background-color;
  border-radius: 16rpx;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;

  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .card-header {
    padding: 25rpx;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1rpx solid #eee;

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15rpx;

      .course-type {
        font-weight: 600;
        color: #333;
        font-size: 32rpx;
        flex: 1;
      }

      .record-date {
        color: #666;
        font-size: 26rpx;
        background: rgba(0, 0, 0, 0.05);
        padding: 5rpx 15rpx;
        border-radius: 20rpx;
      }
    }

    .class-info {
      display: flex;
      align-items: center;
      color: #666;
      font-size: 26rpx;

      uni-icons {
        margin-right: 10rpx;
      }

      .class-name {
        font-weight: 500;
      }
    }
  }

  .card-content {
    padding: 25rpx;

    .info-row {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      padding: 10rpx 0;

      &:last-child {
        margin-bottom: 0;
      }

      uni-icons {
        margin-right: 15rpx;
        width: 32rpx;
        text-align: center;
      }

      .time-text,
      .teacher-text,
      .duration-text {
        color: #555;
        font-size: 26rpx;
        flex: 1;
      }
    }
  }

  .card-footer {
    padding: 0 25rpx 25rpx;
    display: flex;
    justify-content: flex-end;

    .duration-badge {
      color: white;
      padding: 8rpx 20rpx;
      border-radius: 25rpx;
      font-size: 24rpx;
      font-weight: 500;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
  }
}

.loading-status {
  text-align: center;
  padding: 40rpx;
  color: #999;
  font-size: 26rpx;

  text {
    padding: 15rpx 30rpx;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 30rpx;
  }
}

// 响应式优化
@media screen and (max-width: 350px) {
  .record-card {
    .card-header {
      padding: 20rpx 15rpx;

      .header-content {
        .course-type {
          font-size: 28rpx;
        }
      }
    }

    .card-content {
      padding: 20rpx 15rpx;

      .info-row {
        .time-text,
        .teacher-text,
        .duration-text {
          font-size: 24rpx;
        }
      }
    }
  }
}
</style>
